<template>
    <div class="farmer">
        <div class="farmer-title">
            <p :class="{animate:isShow,wo:isHidden}"><span>我们的农民</span></p>
            <section :class="{animate2:isShow,wo:isHidden}">欢迎我们的农民专家</section>
        </div>
        <div class="farmer-list clearfix" :class="{animate10:isShow,wo:isHidden}">
            <ul>
                <li :class="{animate11:isShow,wo:isHidden}">
                <div style="height:80%;overflow:hidden;">
                   <img src="../assets/images/farmer1.jpg" alt="">
                </div>
                    <div>
                        <p style="font-size:18px;">安德鲁.霍金斯</p>
                        <p style="font-size:12px">农民</p>
                        <p style="font-size:14px">安德鲁是一位优秀的酿酒师，感谢他的祖父。</p>
                    </div>
                </li>
                <li :class="{animate12:isShow,wo:isHidden}">
                    <div style="height:80%;overflow:hidden;">
                        <img src="../assets/images/farmer2.png" alt="">
                    </div>
                    <div>
                        <p style="font-size:18px;">安东尼.帕特尔</p>
                        <p style="font-size:12px">拖拉机司机</p>
                        <p style="font-size:14px">安东尼拥有惊奇的驾驶技巧，是有机食品运输所的必需的。</p>
                    </div>
                </li>
                <li :class="{animate13:isShow,wo:isHidden}">
                    <div style="height:80%;overflow:hidden;">
                        <img src="../assets/images/farmer3.png" alt="">
                    </div>
                    <div>
                        <p style="font-size:18px;">霍华德.古铁雷斯</p>
                        <p style="font-size:12px">拖拉机司机</p>
                        <p style="font-size:14px">霍华德是安东尼的同事，他们是长期合作的朋友。</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                isShow:false,
                isHidden:true  
            }
        }, 
        mounted(){
            window.addEventListener('scroll',function(){ 
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
                if(scrollTop >= 3100){
                   this.isShow = true;
                   this.isHidden = false;
            }
        }.bind(this))
    }
}
</script>

<style scoped>
    p{margin:0;padding:0; line-height:1.7;color: rgba(31,37,38,.75);}
    li{list-style:none;}
    ul{margin:0;padding:0;}

    .farmer{ 
       background:#f9f8f6;
       text-align:center;
    }
    .farmer-title{
        padding-top:70px;
    }
    .farmer-title p{
        font-size:30px;
        color: rgb(51, 51, 51);
    }
    .farmer-title section{
        margin-top:5px;
        font-size:14px;
        color: rgba(31,37,38,.75);
    }
    .farmer-list{
        width:72%;
        margin:40px auto;
        
    }
    .farmer-list ul li{
        float:left;
        width:33.3333333333%;
        height:480px;
    }
    .farmer-list ul li:hover img{
        transform:scale(1.2)
    }
    .farmer-list img{
       width: 96%;
       height:96%;
       transition: all 0.3s ease-out;
    }
    .clearfix:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
  }
  .clearfix {
    zoom: 1;
  }
</style>